<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="/static/js/vue.min.js"></script>
    <!-- import CSS -->
    <link rel="stylesheet" href="/static/css/element-ui.css">
    <link rel="stylesheet" href="/static/css/fonts/element-icons.woff">
    <link rel="stylesheet" href="/static/css/login.css">
</head>
<body>
<div id="app">
    <div style="display: flex; flex-direction: column; justify-content: center; align-items: center; height: 80vh;">
        <el-card class="box-card">
            <div class="clearfix" style="text-align: center; margin-bottom: 20px">
                <span>风云天下签到助手</span>
            </div>
            <el-form ref="loginForm" :model="loginForm" label-position="center" label-width="70px" style="width: 500px">
                <el-form-item prop="username" style="width: 100%; text-align: center;" label="账号">
                    <el-input v-model="loginForm.username" type="text" auto-complete="off" style="width: 100%;  margin-right: 40px">
                        <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
                    </el-input>
                </el-form-item>
                <el-form-item prop="password" style="width: 100%" label="密码">
                    <el-input v-model="loginForm.password" type="password" auto-complete="off"  style="width: 100%">
                        <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-button :loading="loading" size="medium" type="primary" style="width: 100%;" @click.native.prevent="submitForm(loginForm)">
                        <span v-if="!loading">登 录</span>
                        <span v-else>登 录 中...</span>
                    </el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</div>
<script src="/static/js/element-ui.js"></script>
<script src="/static/js/axios.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            loginForm: {
                username: '',
                password: ''
            },
            loading: false
        },
        methods: {
            submitForm(formName) {
                const params = new URLSearchParams();
                params.append('username', formName.username);
                params.append('password', formName.password);
                axios.post('/login', params).then(res => {
                    window.location='/home'
                }).catch(err => {
                    console.log(err)
                })
            }
        }
    })
</script>
</body>

</html>
